<script>
export default {
  name: 'Breadcrumb',
  // 函数式组件，它内部的东西不是响应式了，没有生命周期一些，性能优化作用
  functional: true,
  /*
   h:创建一个虚拟DOM
   render:它会return一个虚拟DOM，return什么组件就渲染什么
   */
  render: (h, context) => {
    // console.log('context', context.slots().default)
    const vnodeArr = []
    context.slots().default.forEach((item, index, arr) => {
      // 数组中每个虚拟DOM节点
      // console.log(item)
      vnodeArr.push(item)
      // 当遍历到数组的最后一项时不会拼接icon图标
      if (arr.length - 1 !== index) {
        vnodeArr.push(h('i', { class: 'el-icon-arrow-right' }))
      }
    })
    // 返回虚拟DOM和类名还要子级
    return h('span', {}, vnodeArr)
  }
}
</script>
<style></style>
